<template>
  <div class="documentary-box">
    <el-row :gutter="20" type="flex">
      <el-col :span="16">
        <NewCard title="跟单人员" :isright="true" :border="false">
          <template #right>
            <el-input
              placeholder="姓名"
              v-model="form.name"
              style="margin-right: 10px"
            ></el-input>
            <el-input
              placeholder="手机号"
              v-model="form.phone"
              style="margin-right: 10px"
            ></el-input>
            <el-button
              type="primary"
              @click="search(form)"
              class="defaultBtn"
              round
              >搜索</el-button
            >
            <el-button class="elBtn" @click="reset" round>重置</el-button>
          </template>
          <!-- 表格 -->
          <el-table
            :data="tableList"
            style="width: 100%"
            highlight-current-row
            @row-click="rowclick"
          >
            <el-table-column label="姓名" prop="userName">
              <template slot-scope="scope">
                <p>{{ scope.row.userName }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="phoneNumber" label="手机号">
              <template slot-scope="scope">
                <p>{{ scope.row.phoneNumber}}</p>
              </template>
            </el-table-column>
            <el-table-column prop="expertNum" label="专家数">
              <template slot-scope="scope">
                <p>{{ scope.row.expertNum }}</p>
              </template>
            </el-table-column>
            
            <el-table-column
              prop="createTime"
              label="创建时间"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <p>{{ scope.row.createTime }}</p>
              </template>
            </el-table-column>
                <!-- <el-table-column label="排序">
                    <template slot-scope="scope">
                      <el-input
                        @blur="review(scope.row)"
                        v-model="scope.row.sort "
                        placeholder="请输入..."
                      ></el-input>
                    </template>
                  </el-table-column> -->
            <!-- <el-table-column
              prop="sort"
              label="排序"
            >
              <template slot-scope="scope">
                <p>{{ scope.row.sort }}</p>
              </template>
            </el-table-column> -->
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click.stop="authorization(scope.row)"
                  >取消授权</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- 添加按钮 -->
          <div class="adddocumentary">
            <el-button @click="clickbBtn" v-if="bottomBtnShow"
              >+添加跟单</el-button
            >
            <div class="addFrom" v-else>
              <el-form :inline="true" ref="form" :model="addform">
                <!-- <el-form-item>
                  <el-input
                    v-model="addform.name"
                    ref="bottBtn"
                    placeholder="姓名"
                    type="mini"
                  ></el-input>
                </el-form-item> -->
                <el-form-item>
                  <el-input
                    v-model="addform.phone"
                    placeholder="手机号"
                  ></el-input>
                </el-form-item>
                <!-- <el-form-item>
                  <el-input
                    v-model="addform.sort"
                    ref="bottBtn"
                    placeholder="排序"
                  ></el-input>
                </el-form-item> -->
                <el-form-item>
                  <el-button
                    type="primary"
                    class="defaultBtn"
                    @click="submint"
                    round
                    >确认</el-button
                  >
                  <el-button class="elBtn" round @click="bottomBtnShow = true"
                    >取消</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </div>
        </NewCard>
      </el-col>
      <el-col :span="12">
        <NewCard title="专家列表" :border="false">
          <el-table
            :data="expertList"
            style="width: 100%"
            highlight-current-row
          >
            <el-table-column label="姓名" width="110">
              <template slot-scope="scope">
                <p>{{ scope.row.name }}</p>
              </template>
            </el-table-column>
            <el-table-column label="类型" width="80">
              <template slot-scope="scope">
                <p>{{ selecttype(scope.row.type) }}</p>
              </template>
            </el-table-column>
            <el-table-column label="擅长领域">
              <template slot-scope="scope">
                <el-popover placement="top-start" width="200" trigger="hover" :content="scope.row.field">
                  <p slot="reference">{{ scope.row.field }}</p>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
              <template slot-scope="scope">
                <el-button type="text" @click="Unbind(scope.row)"
                  >解绑</el-button
                >
                <!-- <el-button type="text" v-else>绑定</el-button> -->
              </template>
            </el-table-column>
          </el-table>

          <!-- 添加专家 -->
          <div class="bottomBtn">
            <el-button @click="clickbAddExpert" v-if="expertBtnShow"
              >+添加专家</el-button
            >
            <div class="addFrom" v-else>
              <el-form :inline="true" ref="form">
                <el-form-item>
                  <el-select v-model="value" placeholder="请选择专家">
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    class="defaultBtn"
                    @click="subbind"
                    round
                    >确认</el-button
                  >
                  <el-button class="elBtn" round @click="expertBtnShow = true"
                    >取消</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </div>
        </NewCard>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import {
  getdocumentaryApi,
  getcancelAuthorizationApi,
  getlistExpertProjectAndFieldApi,
  getunboundExpertsApi,
  getdocumentaryunbindApi,
  getdocumentarybindApi,
  addcancelAuthorizationApi,
} from "@/wss/newApi_3-24/BK/hr/documentary.js";
import failureVue from "../../../views/workbench/reptile/failure.vue";

export default {
  components: { NewCard },
  data() {
    let checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        let reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
        if (!reg.test(value)) {
          callback(new Error("请输入正确的手机号"));
        } else {
          callback();
        }
      }
    };
    return {
      // 表格数据
      tableList: [],
      newtableList: [],
      form: {
        name: "",
        phone: "",
      },
      bottomBtnShow: true, //底部按钮
      //底部输入表单
      addform: {
        name: "",
        phone: "",
        sort: "",
      },
      id: "", //跟单人员id

      // 专家列表
      expertList: [],
      expertBtnShow: true, //底部按钮
      //底部输入表单
      value: "",
      options: [],
    };
  },
  created() {
    this.getdocumentaryApiFn();
  },
  methods: {
    //查询跟单人员
    async getdocumentaryApiFn() {
      let { code, rows } = await getdocumentaryApi();
      this.tableList = JSON.parse(JSON.stringify(rows));
      this.newtableList = this.tableList;
    },
    //取消跟单人员的授权
    async getcancelAuthorizationApiFn(userId) {
      console.log(userId, "id");
      let { code, rows } = await getcancelAuthorizationApi(userId);
      if (code == 200) {
        this.$message({
          message: "取消授权成功",
          type: "success",
        });
        this.getdocumentaryApiFn();
      } else {
        return false;
      }
    },
    //跟单人员的授权
    async submint() {
      let newform = {
        phoneNumber:this.addform.phone,
        // userName:this.addform.name,
        // sort:parseInt(this.addform.sort)
      };
      let phone = this.addform.phone;
      let sort = this.addform.phone;
      if (this.addform.phone ) {
        var regExp = new RegExp("^1[3578]\\d{9}$");
        // var sortExp = new RegExp("^[0-9]*[1-9][0-9]*$");
        if (regExp.test(phone) ) {
          let { code, rows } = await addcancelAuthorizationApi(newform);
          if (code == 200) {
            this.$message({
              message: "授权成功",
              type: "success",
            });
            (this.addform.phone = ""),
              (this.addform.name = ""),
              (this.bottomBtnShow = true);
            this.getdocumentaryApiFn();
          }
        } else {
          this.$message({
            message: "请输入正确的手机格式",
            type: "warning",
          });
        }
      } else {
        this.$message({
          message: "请输入对应信息",
          type: "error",
        });
      }
    },

    //查询对应的项目专家
    async getlistExpertProjectAndFieldApiFn(id) {
      let { code, rows } = await getlistExpertProjectAndFieldApi(id);
      this.expertList = JSON.parse(JSON.stringify(rows));
      // this.newtableList=this.tableList
    },
    //查询对应的专家
    async getunboundExpertsApiFn() {
      let { code, rows } = await getunboundExpertsApi();
      if (code == 200) {
        this.options = rows;
        console.log(rows, "112233");
      }
    },
    //未绑定专家
    async getunboundExpertsApiFn() {
      let { code, rows } = await getunboundExpertsApi();
      if (code == 200) {
        this.options = rows;
      }
    },
    //解绑接口
    async Unbind(row) {
      console.log(row.expertId, "row");
      let { code, rows } = await getdocumentaryunbindApi(row.expertId);
      if (code == 200) {
        this.$message({
          message: "解绑成功",
          type: "success",
        });
      }
      this.getlistExpertProjectAndFieldApiFn(this.id);
      this.getdocumentaryApiFn();
    },

    //绑定接口

    async subbind() {
      let id = this.value;
      console.log(id, "id");
      let { code, rows } = await getdocumentarybindApi({
        userId: this.id,
        expertId: id,
      });
      if (code == 200) {
        this.$message({
          message: "绑定成功",
          type: "success",
        });
        (this.value = ""), (this.expertBtnShow = true);
        this.getlistExpertProjectAndFieldApiFn(this.id);
        this.getdocumentaryApiFn();
      }
    },

    //取消授权
    authorization(value) {
      // console.log(value,"7897987");
      // let userId = value.userId;
      this.getcancelAuthorizationApiFn(value.userId);
    },
    rowclick(row) {
      this.id = row.userId;
      this.getlistExpertProjectAndFieldApiFn(this.id);
      console.log(row, "row");
    },

    // 搜索对应的数据
    search(value) {
      console.log(value, "valuevaluevaluevalues");
      let tableList = this.tableList;
      let newArr = this.newtableList;
      tableList = newArr.filter((item) => {
        return (
          item.userName.includes(value.name) &&
          item.phoneNumber.includes(value.phone)
        );
      });
      console.log(tableList, "tableList");
      this.tableList = tableList;
    },
    //清空input数据
    reset() {
      this.form = {
        name: "",
        phone: "",
      };
    },
    selecttype(value) {
      const stateMap = {
        1: "咨询",
        0: "项目",
      };
      return stateMap[value];
    },
    // 点击添加跟单
    clickbBtn() {
      //显示输入框
      this.bottomBtnShow = false;
      //输入框自动获取焦点
      this.$nextTick(() => {
        this.$refs.bottBtn.focus();
      });
    },

    // 点击添加专家
    clickbAddExpert() {
      //显示输入框
      this.expertBtnShow = false;
      //输入框自动获取焦点
      // this.$nextTick(()=>{
      //   this.$refs.expbottBtn.focus()
      // })
      this.getunboundExpertsApiFn();
    },
  },
};
</script>

<style scoped>
.documentary-box {
  height: 100%;
}
.documentary-box .el-row {
  height: 100%;
}
.documentary-box .el-row .el-card {
  position: relative;
}

::v-deep .el-card__body {
  height: 100%;
}
::v-deep .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .el-card__body > div::-webkit-scrollbar {
  width: 0;
}

/* 搜索 */
.right .el-input {
  width: 120px;
  margin-right: 10px;
}
.defaultBtn {
  padding: 8px 20px;
  background-color: #f87a23;
  border-color: #f87a23;
}
.elBtn {
  padding: 8px 20px;
}

/* 表格样式 */
.el-table {
  margin-bottom: 30px;
}
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}
::v-deep .el-table td {
  /* border-bottom: 0; */
}
::v-deep .el-table td .islight {
  color: #f87a23;
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
  padding: 6px 0;
}

::v-deep .el-table__footer-wrapper tbody td {
  background-color: #fff;
  font-weight: bold;
  color: #2e3f5e;
}
/* 添加跟单 */
.adddocumentary {
   position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
 
}
.adddocumentary > .el-button {
  width: 100%;
  border: 0;
  border-top: 1px solid #ecedf0;
  background-color: #f8f8f8;
  line-height: 25px;
  color: #606e84;
}
/* .adddocumentary .el-input {
  width: 100%;
} */

/* 添加材料 */
.bottomBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
.bottomBtn > .el-button {
  width: 100%;
  border: 0;
  border-top: 1px solid #ecedf0;
  background-color: #f8f8f8;
  line-height: 25px;
  color: #606e84;
}
.bottomBtn .el-input {
  width: 100%;
}

.addFrom {
  padding: 5px;
  background-color: #f8f8f8;
}
.addFrom .el-form-item {
  margin-bottom: 0;
}
.addFrom .el-form {
  text-align: center;
}
::v-deep .bottomBtn .el-input .el-input__inner {
}

@media (max-width: 1180px) {
  .right .el-input{
    width: 100px
  }
  ::v-deep .el-table .cell p{
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
  }
}
</style>